<template>
  <div ref="main" id="main" style="width: 100%; height: 100%; margin: auto">
    <div ref="pops">sdsdsdsd</div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Object,
    },
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let echarts = this.$echarts.init(this.$refs.main);
      var newchartName = ["2021Q3", "2021Q4", "2022Q1", "2022Q2", "2022Q3",'2022Q4','2023Q1','2023Q2'],
      newchartValue1 = ["91", "51", "29", 40, 50, "29", 40, 50],
        newchartValue2 = ["83", "81", "20", 50, 40, "20", 50, 40];
      var barWidth = 17;
      var data = [
        {
          name: "",
          value: 100,
          symbolPosition: "end",
        },
        {
          name: "",
          value: 100,
          symbolPosition: "end",
        },
        {
          name: "",
          value: 100,
          symbolPosition: "end",
        },
        {
          name: "",
          value: "100",
          symbolPosition: "end",
        },
        {
          name: "",
          value: "100",
          symbolPosition: "end",
        }, {
          name: "",
          value: 100,
          symbolPosition: "end",
        },
        {
          name: "",
          value: "100",
          symbolPosition: "end",
        },
        {
          name: "",
          value: "100",
          symbolPosition: "end",
        },
      ];
      var dataBottom = [
        {
          name: "",
          value: "100",
        },
        {
          name: "",
          value: "100",
        },
        {
          name: "",
          value: "100",
        },
        {
          name: "",
          value: "100",
        },
        {
          name: "",
          value: "100",
        },
      ];
      var color1 = {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
        colorStops: [
          {
            //第一节下面
            offset: 0,
            color: "#1C98CD",
          },
          {
            offset: 1,

            color: "rgba(61,187,255,.16)",
          },
        ],
      };
      var color2 = {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
        colorStops: [
          {
            //第一节下面
            offset: 0,
            color: "#E7AB47",
          },
          {
            offset: 1,
            color: "rgba(255,164,41,.16)",
          },
        ],
      };
      let that = this;
      let option = {
        backgroundColor: "",
        color: ["#30dcf3", "#e7c59c"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,50,99,0.65)",
          borderColor: "rgba(0,129,255,1)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontFamily: "SourceHanSansCN",
          },
         
        },
        legend: {
          //   type: "scroll",
          top: "14",
          left: "30%",
          itemGap: 11,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          data: ["融资金额", "利率", "户数", "信贷覆盖率"],
        },
        grid: {
          left: "1%",
          right: "4%",
          bottom: "5%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#8A9AB6",
              },
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#fff",
                fontWeight: "normal",
                fontSize: 12,
              },
              margin: 10, //刻度标签与轴线之间的距离。
            },
            data: newchartName,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: newchartName,
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "rgba(255,255,255,0.7)",
              fontSize: 14,
              fontFamily: "SourceHanSansCN",
            },

            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,0.7)",
              fontSize: 14,
              fontFamily: "SourceHanSansCN",
            },
          },
        ],
        series: [
          {
            name: "融资金额",
            type: "bar",
            barGap: "50%",
            barWidth: barWidth,
            itemStyle: {
              color: color1,
              borderColor: color1,
              borderWidth: 1,
              borderType: "solid",
            },
            label: {
              show: true,
              formatter: "{c}" + "%",
              position: "top",
              color: "rgba(119,167,255,1)",
              fontSize: 12,
              textAlign: "center",
            },
            zlevel: 2,
            data: newchartValue1,
          },
          {
            name: "利率",
            type: "bar",
            barGap: "50%",
            barWidth: barWidth,
            itemStyle: {
              // color: 'rgba(255,164,41,.16)',
              color: color2,
              borderColor: color2,
              borderWidth: 1,
              borderType: "solid",
            },
            label: {
              show: true,
              formatter: "{c}" + "%",
              position: "top",
              color: "rgba(255,228,59,1)",
              fontSize: 12,
              textAlign: "center",
            },
            zlevel: 2,
            data: newchartValue2,
          },
          {
            name: "户数",
            type: "line",
            smooth: true,
            barWidth: 10,
            data: [110, 82, 91, 104, 60, 90, 40],
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            // data: that.data.map((v) => v.近3个月内有融资企业数量),
            itemStyle: {
              normal: {
                color: "#B130EF",
              },
            },
          },
          {
            name: "信贷覆盖率",
            type: "line",
            smooth: true,
            barWidth: 10,
            data: [60, 62, 61, 54, 80, 70, 50, 80, 70, 50],
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            
            // data: that.data.map((v) => v.近3个月内有融资企业数量),
            itemStyle: {
              normal: {
                color: "#35FFBF",
              },
            },
          },
          {
            name: "左侧柱状图内容头部", //不显示弹窗
            type: "pictorialBar",
            symbolSize: [barWidth, 10],
            symbolOffset: ["-75%", -5],
            symbolPosition: "end",
            z: 15,
            color: "#3eb6f5",
            zlevel: 2,
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: newchartValue1,
          },
          {
            name: "右侧柱状图内容头部", //不显示弹窗
            type: "pictorialBar",
            symbolSize: [barWidth, 10],
            symbolOffset: ["75%", -5],
            symbolPosition: "end",
            z: 15,
            color: "#ffc241",
            zlevel: 2,
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: newchartValue2,
          },

          {
            name: "右侧柱状图容器", //不显示弹窗
            type: "bar",
            xAxisIndex: 1,
            barGap: "50%",
            data: [100, 100, 100, 100, 100, 100, 100, 100],
            zlevel: 1,
            barWidth: barWidth,
            tooltip:{
              trigger:'axis',
              show:false
            },
            itemStyle: {
              normal: {
                color: "rgba(61,187,255,.16)",
              },
            },
          },
          {
            name: "左侧柱状图容器", //不显示弹窗
            type: "bar",
            xAxisIndex: 1,
            barGap: "50%",
            data: [100, 100, 100, 100, 100, 100, 100, 100],
            zlevel: 1,
            barWidth: barWidth,
            tooltip:{
              trigger:'axis',
              show:false
            },
            itemStyle: {
              normal: {
                color: "rgba(255,164,41,.16)",
              },
            },
          },
          {
            name: "左侧柱状图底部", //不显示弹窗
            type: "pictorialBar",
            symbolSize: [barWidth, 10],
            symbolOffset: ["-76%", 5],
            z: 12,
            color: "#3eb6f5",
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: dataBottom,
          },
          {
            name: "右侧柱状图底部", //不显示弹窗
            type: "pictorialBar",
            symbolSize: [barWidth, 10],
            symbolOffset: ["76%", 5],
            z: 12,
            color: "#ffc241",
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: dataBottom,
          },
          // 头

          {
            name: "左侧柱状图容器头部", //不显示弹窗
            type: "effectScatter",
            rippleEffect: {
              period: 1,
              scale: 5,
              brushType: "fill",
            },
            z: 20,
            zlevel: 3,
            symbolPosition: "end",
            symbolSize: [7, 4],
            symbolOffset: [-12, 0],
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 5,
                shadowOffsetY: 3,
                shadowOffsetX: 0,
                color: "rgba(119,167,255,1)",
              },
            },
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: data,
          },
          {
            name: "右侧柱状图容器头部", //不显示弹窗
            type: "effectScatter",
            rippleEffect: {
              period: 1,
              scale: 5,
              brushType: "fill",
            },
            z: 20,
            zlevel: 2,
            symbolPosition: "end",
            symbolSize: [7, 4],
            symbolOffset: ["13", 0],
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 5,
                shadowOffsetY: 3,
                shadowOffsetX: 0,
                color: "rgba(255,164,41,0.5)",
              },
            },
            tooltip:{
              trigger:'axis',
              show:false
            },
            data: data,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      echarts.setOption(option);
    },
  },
};
</script>

<style></style>
